<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专题突破 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/topic.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="sub-header">
            <a href="index.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>专题突破</h1>
            <div class="header-action">
                <i class="fas fa-search"></i>
            </div>
        </header>

        <!-- 专题分类 -->
        <div class="topic-categories">
            <div class="category active">全部</div>
            <div class="category">基础知识</div>
            <div class="category">架构设计</div>
            <div class="category">项目管理</div>
            <div class="category">案例分析</div>
        </div>

        <!-- 专题列表 -->
        <section class="topic-list">
            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-network-wired"></i>
                </div>
                <div class="topic-info">
                    <h3>分布式系统架构</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 75%;">75%</div>
                        </div>
                        <span>120题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-cloud"></i>
                </div>
                <div class="topic-info">
                    <h3>云计算与虚拟化</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 60%;">60%</div>
                        </div>
                        <span>85题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-database"></i>
                </div>
                <div class="topic-info">
                    <h3>数据库设计与优化</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 45%;">45%</div>
                        </div>
                        <span>95题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div class="topic-info">
                    <h3>系统安全架构</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 30%;">30%</div>
                        </div>
                        <span>75题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-project-diagram"></i>
                </div>
                <div class="topic-info">
                    <h3>微服务架构</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 80%;">80%</div>
                        </div>
                        <span>110题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-tasks"></i>
                </div>
                <div class="topic-info">
                    <h3>软件工程与项目管理</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 65%;">65%</div>
                        </div>
                        <span>130题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-sitemap"></i>
                </div>
                <div class="topic-info">
                    <h3>设计模式</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 55%;">55%</div>
                        </div>
                        <span>90题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="topic-info">
                    <h3>性能优化</h3>
                    <div class="topic-meta">
                        <div class="progress-bar">
                            <div class="progress" style="width: 40%;">40%</div>
                        </div>
                        <span>80题</span>
                    </div>
                </div>
                <div class="topic-action">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </section>

        <!-- 学习计划 -->
        <section class="study-plan">
            <h2 class="section-title">推荐学习计划</h2>
            <div class="plan-card">
                <div class="plan-header">
                    <h3>系统架构师考试冲刺计划</h3>
                    <span class="plan-duration">60天</span>
                </div>
                <div class="plan-progress">
                    <div class="progress-bar">
                        <div class="progress" style="width: 35%;">35%</div>
                    </div>
                </div>
                <div class="plan-details">
                    <div class="plan-item">
                        <i class="fas fa-check-circle"></i>
                        <span>每日专题练习</span>
                    </div>
                    <div class="plan-item">
                        <i class="fas fa-check-circle"></i>
                        <span>重点难点突破</span>
                    </div>
                    <div class="plan-item">
                        <i class="fas fa-check-circle"></i>
                        <span>模拟考试训练</span>
                    </div>
                </div>
                <button class="join-plan-btn">加入计划</button>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html">
                <i class="fas fa-home"></i>
                <span>学习</span>
            </a>
            <a href="profile.html">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/topic.js"></script>
</body>
</html> 